<template>
  <div class="wcy-table-setting">
    <!-- left -->
    <div class="left">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>

    <!-- right -->
    <div class="right">
      <div class="top">
        <div class="flexRBC">
          <div class="title">{{ shopName }}</div>
        </div>

        <div class="tab">
          <el-tabs v-model="activeName">
            <el-tab-pane label="桌台设置" name="table" />
            <el-tab-pane label="区域设置" name="area" />
          </el-tabs>
        </div>
      </div>

      <div class="bottom app-main-content-box">
        <!-- 桌号 -->
        <table-list v-if="activeName==='table'&&shopId" :shop-id="shopId" />
        <!-- 区域 -->
        <area-list v-if="activeName==='area'&&shopId" :shop-id="shopId" />
      </div>
    </div>
  </div>
</template>

<script>
import TableList from './components/TableList'
import AreaList from './components/AreaList'
export default {
  components: {
    TableList,
    AreaList
  },
  data() {
    return {
      activeName: 'table',
      shopId: 0,
      shopName: ''
    }
  },
  methods: {
    // 选择门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 左侧组织 */
  .left {
    float: left;
  }
  .right {
    overflow: hidden;
    .top {
      padding: 24px 30px 0;
      border-radius: 5px 5px;
      background-color: #fff;
      margin-bottom: 10px;
      .title {
        font-size: 20px;
      }
    }
  }

  /* reset element*/
  .wcy-table-setting ::v-deep .tab {
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>
